<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>反馈意见</title>
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<![endif]-->
<!-- Main Stylesheet --> 
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/style.css" type="text/css" />
<!-- Your Custom Stylesheet --> 
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/custom.css" type="text/css" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/bm/remark.css" type="text/css" />
<link href="<%=request.getContextPath()%>/lib/thickbox/thickbox.css" rel="stylesheet" type="text/css" />
<%@include file="/include/header.jsp" %>
<script src="<%=request.getContextPath()%>/lib/jquery/jquery-1.4.2.min.js"></script>
<script src="<%=request.getContextPath()%>/lib/jquery/jquery.form.js"></script>
<script src="<%=request.getContextPath()%>/lib/jquery/jquery.validate_pack.js"></script>
<script src="<%=request.getContextPath()%>/lib/jquery/thickbox.js"></script>
<script src="<%=request.getContextPath()%>/js/function.js"></script>
<script src="<%=request.getContextPath()%>/js/page/pageRender.js"></script>
<script src="<%=request.getContextPath()%>/lib/kindeditor/kindeditor-min.js"></script>
<script src="<%=request.getContextPath()%>/lib/kindeditor/lang/zh_CN.js"></script>
<script type="text/javascript"><!--
	var curuser = '<s:property value="#attr.SEC_USER.username"/>';
	$(document).ready(function(){
		window["pr"] = new PageRender({
			id: 'pr',
			method: 'ajax',
			url:'<%=request.getContextPath()%>/bm/listFeedBack.action',
			dataType: 'html',
			renderTo: 'page_bar', 
			cache: false,
			beforeLoad: function(){Mask.show();},
			afterLoad: function(){Mask.hide();},
			noDataInfo: '当前还没有人反馈',
			success: function(html){
				$("#data_area").html(html);
				
		  		$(".response_container").each(function(index){
		  			var typeId = $(this).attr("typeId");
		  			$.ajax({
		  				url: '<%=request.getContextPath()%>/bm/listResponse.action',
		  				dataType: 'json',
		  				data: {typeId: typeId, responseType: responseType},
		  				success: function(json){
			  				Ajax.callback(json, function(data, json){
			  					if(data && data.length > 0){
									$("#response_container_"+typeId).html(getResponseHtml(data));
								}
				  				
							});
		  				}
		  			});
		  		});
			}
		});
		window["pr"].position(1);
		
		$(".emitUser").live("click", function(){
			var username = $(this).attr("username");
			parent.doAction('/bm/enterUserCenter.action?username='+username, '留言板,用户资料');
		});
	});
	//组装回复区域HTML
	function getResponseHtml(data){
		var html = [];
		for(var i=0; i<data.length; i++){
			var res = data[i];
			html.push("<li id='response_id_"+res.id+"'><div class='response-title'><div class='left'><a username='"+res.user.username+"' href='javascript:void(0);' class='emitUser'>"+res.user.userText+"</a>回复：</div>");
			html.push("<div class='right'><span class='mr10'>回复时间:"+DateUtil.date2YYMMDDHHMI(res.emitDate)+"</span>");
			html.push("<span class='mr10'>IP:"+res.ip+"</span>");
			if(res.acl.allowDel){
				html.push("<a href='javascript:void(0);' class='mr5' onclick='delResponse("+res.id+");'>删除</a>");
			}
			if(res.acl.allowResponse){
				html.push("<a href='javascript:void(0);' class='mr5' onclick='javascript:showResponse("+res.id+", \""+res.user.userText+"\", this, "+res.typeId+", "+res.id+");'>回复</a>");
			}
			html.push("</div>&nbsp;</div>");
			html.push("<div class='response-content'>"+res.content.escapeHTML()+"</div>");
			html.push("<ul id='sub_response_container_"+res.id+"'>");
			if(res.subResponses){
				html.push(getResponseHtml(res.subResponses));
			}
			html.push("</ul>");
			html.push("<div id='sub_response_area_"+res.id+"' class='response_wrapper'></div>");
			html.push("</li>");
		}
		return html.join('');
	}
	
	var editorInit = false;
	//显示评论区域
	function showFeedBack(){
		var showEditorArea = function(){
			$("#feedBack-area").show();
			if(! editorInit){
				editorInit = true;
				editor = KindEditor.create('textarea[name="feedBack.content"]', {
					items: [
				        'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'cut', 'copy', 'paste',
				        'plainpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
				        'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
				        'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
				        'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
				        'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 
						'table', 'hr', 'emoticons', 'map', 'code', 'pagebreak',
				        'link', 'unlink', '|', 'about'
					],
					themeType: 'simple',
					urlType: 'absolute', 
					allowPreviewEmoticons: false,
					allowImageUpload: false,
					allowFlashUpload: false,
					allowMediaUpload: false,
					allowFileManager: false,
					afterCreate: function(id) {
						var self = this;
				    	KindEditor.ctrl(self.edit.doc, 13, function() {
					    	submitFeedBackForm();
				    	});
				    }
				});
				$("#form_submit").bind("click", submitFeedBackForm);
			}
			
			window.scrollTo(0, document.body.scrollHeight);
		};
		if(! curuser){
			getTopWindow().login(function(){
				curuser = "true";
				showEditorArea();
			});
		}else{
			showEditorArea();
		}
		
	}
	//隐藏评论区域
	function hideFeedBack(){
		$("#feedBack-area").hide();
	}
	function doSearch(){
		window["pr"].position(1);
	}
	
	function submitFeedBackForm(){
		editor.sync();
		var form = $("#feedBackForm")[0];
		var title = form["feedBack.title"].value;
		if(title.trim().length < 1){
			Alert("请输入标题");
			return false;
		}
		if(title.trim().length > 100){
			Alert("标题不能大于100");
			return false;
		}
		var content = form["feedBack.content"].value;
		if(content.trim().length < 1){
			Alert("请输入内容");
			return false;
		}
		if(content.length > 2000){
			Alert("内容不能超过2000个字符");
			return false;
		}
		$("#feedBackForm").ajaxSubmit(function(json){
			Ajax.callback(json, function(data, json){
				editor.html('');
				$("#feedBackForm")[0].reset();
				hideFeedBack();
				Alert("发表成功");
				doSearch();
			});
		});
		return false;
	}
	//显示回复区域
	function showResponse(id, user, el, typeId, parentId){
		parentId = parentId || 0;
		typeId = typeId || id;
		var elid = "#response_area_"+id;
		var ctnid = "#response_container_"+id;
		if(parentId > 0){elid = "#sub_response_area_"+id; ctnid = "#sub_response_container_"+id;};
		var html = '<form id="response_form_'+id+'" method="POST" action="'+path+'/bm/emitResponse.action">'
						+'<input name="responseType" type="hidden" value="'+responseType+'"/>'
						+'<input name="parentId" type="hidden" value="'+parentId+'"/>'
						+'<input name="typeId" type="hidden" value="'+typeId+'"/>'
						+'<fieldset>'
						+'<legend>回复<span class="emitUser">'+user+'<span>：</legend>'
						+'<textarea name="content" class="small half"></textarea>'
						+'<button type="submit" class="btn btn-green big"><span class="icon icon-ok"></span>确定(Ctrl+Enter)</button>&nbsp;&nbsp;'
						+'<button type="button" class="btn big" onclick="javascript:$(\''+elid+'\').html(\'\');">'
						+'<span class="icon icon-close"></span>取消</button>'
						+'</fieldset>'
					+'</form>';
		$(elid).html(html);
		
		function resFormSumbit(){
			var form = $(this)[0];
			var content = form["content"].value;
			if(content.trim().length < 1){
				Alert("请输入内容");
				return false;
			}
			if(content.length > 2000){
				Alert("内容不能超过2000个字符");
				return false;
			}
			$(this).ajaxSubmit(function(json){
				Ajax.callback(json, function(data, json){
					if(data){
						$(ctnid).append(getResponseHtml([data]));
						$(elid).html('');
						Alert("回复成功");
						
					}
				});
			});
			return false;
		};
		$("#response_form_"+id).bind("keydown", function(event){
			if(event.ctrlKey && event.keyCode == 13){
				return resFormSumbit.call(this);
			}
		});
		setTimeout(function(){
		$("#response_form_"+id).submit(resFormSumbit);}, 0);
	}
	//删除回复
	function delResponse(id){
		if(confirm("准备删除，请确认")){
			$.ajax({
				url: path+"/bm/delResponse.action",
				data: {id: id},
				dataType: 'json',
				success: function(json){
					Ajax.callback(json, function(data, json){
						var el = $("#response_id_"+id)[0];
						el.parentNode.removeChild(el);
						Alert("删除成功");
					});
				}
			});
		}
	}
	//删除评论
	function delFeedBack(id){
		if(confirm("准备删除，请确认")){
			$.ajax({
				url: path+"/bm/delFeedBack.action",
				data: {id: id},
				dataType: 'json',
				success: function(json){
					Ajax.callback(json, function(data, json){
						var el = $("#remark_container_"+id)[0];
						el.parentNode.removeChild(el);
						Alert("删除成功");
					});
				}
			});
		}
	}
--></script>
</head>
<body>
	<%@include file="/include/body.jsp" %>
	
<!-- Wrapper -->
<div class="wrapper">
	<div class="content-box" id="show_area">
	<header>
		<h3>
    		<span>留言板</span>
    	</h3>
    	<div>
			 <span>
	    		<span>
	    			<a class="btn btn-gray" href="javascript:void(0)" onclick="doSearch();"><span class="icon icon-refresh"></span>刷新</a>
	    			<a class="btn btn-green" href="javascript:void(0)" onclick="showFeedBack();"><span class="icon icon-add"></span>我要发言</a>
	    		</span>
	    	</span>
	    </div>
    </header>
    <section>
     <table class="display stylized" id="data_table">
		<tbody id="data_area">
			
		</tbody>
	</table>
	<div id="page_bar"></div>
	</section>
	</div>
	
	<div id="feedBack-area" style="display:none;">
		<form id="feedBackForm" method="post" name="feedBackForm" action="<%=request.getContextPath()%>/bm/emitFeedBack.action">
		<h3>
			请留下您的宝贵意见，我们将会根据您的建议来改进服务。
		</h3>
		<label class="required big">标题：</label><br/>
		<input type="text" name="feedBack.title" value="" class="title width4"/>
		<div class="mtb10">
			<label class="required big mtb5">内容：(最多输入2000个字符)</label>
			<textarea name="feedBack.content" class="width5" style="height:200px;visibility:hidden;"></textarea>
		</div>
		<button id="form_submit" type="button" class="btn btn-green big"><span class="icon icon-ok"></span>确定(Ctrl+Enter)</button>
		&nbsp;&nbsp;<button class="btn btn-blue big" type="reset">重置</button>
		&nbsp;&nbsp;<button name="hideEditorArea" class="btn big" type="button" onclick="javascript:hideFeedBack();"><span class="icon icon-close"></span>取消</button>
		</form>
	</div>
</div>
<!-- End of Wrapper -->
</body>
</html>